<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="page" />

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>穿美在线鞋城</title>
	<link rel="stylesheet" href="${ctx}/css/templatemo_style.css" /> <!-- 页面整体布局样式定义 -->
	<link rel="stylesheet" href="${ctx}/css/ddsmoothmenu.css" /> <!-- 菜单样式定义 -->
	<script type="text/javascript" src="${ctx}/js/jquery-1.4.3.min.js"></script>

	<style type="text/css">
		form{ position:relative; left:50px; }
		.input_field { width: 620px; padding: 15px 0px; }
		.input_field p { position:relative; left:48px; margin: 0px 0px; }
		.input_field label { float: left; position:relative; top: 3px; }
		.input_field input { position:relative; }
		.input_field span { position:relative; left: 4px; color:#a8abab; }
		.input_field .codespan{ position:relative; top: -5px; left: 20px; }
		.input_field .vicode { position:relative; top:-6px; width:72px;  }
		.input_field img { position:relative; left:8px; width:72px; height:21px; }
		.input_field .imgchange { position:relative; top:-5px; left:15px; width:72px; height:21px; }
		.input_field .sub{ position:relative; left:46px; width:162px; }
		.input_field .toreg{ float: right; position:relative; top:4px; right:308px; }
	</style>
	
	<script type="text/javascript">
		var ctx = "${pageContext.request.contextPath}";
        function showUserName(){
            var name = "${user.username}";
            if(name != ""){
                $("#login").html(name);
                $("#exitP").show();
                $("#login").attr("href", ctx + "/user?flag=info&userId=${user.userid}");
            }else{
                $("#login").html("登录");
                $("#exitP").hide();
                $("#login").attr("href", ctx + "/user?flag=login");
            }
        }


	</script>
</head>
<body>
	<div id="templatemo_body_wrapper">
		<div id="templatemo_wrapper">

			<!-- header -->
			<div id="templatemo_header">
				<div id="site_title"><h1><a href="${ctx}/ProductServlet">穿美在线鞋城</a></h1></div>
				<div id="header_right">
					<p>
						<a href="${ctx}/user?flag=login" id="login">登录</a>&nbsp;
						<span id="exitP" style="display: none"><a href="${ctx}/user?flag=logout" id="exit">注销</a></span>
					</p>
				</div>
				<div class="cleaner"></div>
			</div>
			<!-- END of templatemo_header -->


			<!-- main -->
			<div id="templatemo_main">
		        <div id="content" class="float_l" style="margin-left:220px;margin-top:20px;">
		        	<h3>登录</h3>
		        	<form action="${ctx}/user" method="post" id="loginform">
						<input type="hidden" id="flag" name="flag" value="ls" />
						
						<div class="input_field">
							<p style="color:red">${message}</p>
						</div>
						
						<div class="input_field">
							<label for="username">用户名：</label>
							<input type="text" id="username" name="username" value="" />
							<span id="un_msg">2~8个字符，可使用字母、数字、下划线，需以字母开头</span>
						</div>

						<div class="input_field">
							<label for="password">密&nbsp;&nbsp;&nbsp;码：</label>
							<input type="password" id="password" name="password" value="" />
							<span id="pw_msg">6~16个字符，区分大小写</span>
						</div>

						<div class="input_field">
							<label for="vicode">验证码：</label>
							<input type="text" id="vicode" name="vicode" value="" maxlength="4" class="vicode" />
							<img id="imgcode" alt="" src="${ctx}/DrawImage?createTypeFlag=nl"><a href="javascript:void(0);" class="imgchange">看不清，换一张</a>
							<span id="vicd_msg" class="codespan">请输入4位验证码，不区分大小写</span>
						</div>

						<div class="input_field">
							<input type="submit" class="sub" value="登录">
							<a href="${ctx}/user?flag=reg" class="toreg">没有账号？去注册</a>
						</div>
					</form>
		        </div>
		        <div class="cleaner"></div>
		    </div>
			<!-- END of templatemo_main -->

			<!-- footer -->
			<div id="templatemo_footer">
				<p>
					<a href="${ctx}/ProductServlet">首页</a> | <a href="${ctx}/ProductCLServlet?action=pp&catid=">产品</a> | <a href="${ctx}/shoppingcartServlet?action=selectcar&userid=${user.userid}">我的购物车</a> | <a href="">我的订单</a>
				</p>
				版权所有 (c) 2018 <a href="javascript:void(0);">金桥软件</a>
			</div>
			<!-- END of templatemo_footer -->
		</div>
	</div>

	<script type="text/javascript">	
		function chkusername(){
			var name = $("#username").val();
			if(name == null || name.length == 0){
				$("#un_msg").html("请输入用户名");
				$("#un_msg").css("color","#f31106");
				return false;
			}
			var regexp = /^[a-zA-Z]{1}[a-zA-Z0-9_]{1,7}$/
			if(!regexp.test(name)){
				$("#un_msg").html("用户名不符合要求");
				$("#un_msg").css("color","#f31106");
				return false;
			}
			return true;
		}
		
		function chkpassword(){
			var passwd = $("#password").val();
			if(passwd == null || passwd.length == 0){
				$("#pw_msg").html("请输入密码");
				$("#pw_msg").css("color","#f31106");
				return false;
			}
			var regexp = /^[a-zA-Z0-9]{1}[a-zA-Z0-9_]{5,15}$/
			if(!regexp.test(passwd)){
				$("#pw_msg").html("密码不符合要求");
				$("#pw_msg").css("color","#f31106");
				return false;
			}
			return true;
		}
		
		function chkimgcode(){
			var imgcode = $("#vicode").val();
			if(imgcode == null || imgcode.length == 0){
				$("#vicd_msg").html("请输入验证码");
				$("#vicd_msg").css("color","#f31106");
				return false;
			}
			var regexp = /^[a-zA-Z0-9]{4}$/
			if(!regexp.test(imgcode)){
				$("#vicd_msg").html("验证码不符合要求");
				$("#vicd_msg").css("color","#f31106");
				return false;
			}
			return true;
		}
	
		$(function() {
			showUserName();
			$(".imgchange").click(function(){
				$("#imgcode").attr("src","${ctx}/drawimage?createTypeFlag=nl" + "&date=" + new Date().getTime());
			});
			
			$("#username").focus(function(){
				$("#un_msg").html("2~8个字符，可使用字母、数字、下划线，需以字母开头");
				$("#un_msg").css("color","#a8abab");
			});
			$("#username").blur(function(){
				chkusername();
			});
			
			$("#password").focus(function(){
				$("#pw_msg").html("6~16个字符，区分大小写");
				$("#pw_msg").css("color","#a8abab");
			});
			$("#password").blur(function(){
				chkpassword();
			});
			
			$("#vicode").focus(function(){
				$("#vicd_msg").html("请输入4位验证码，不区分大小写");
				$("#vicd_msg").css("color","#a8abab");
			});
			$("#vicode").blur(function(){
				chkimgcode();
			});
			
			$("#loginform").submit(function(){
				if(!chkusername()){
					return false;
				}
				if(!chkpassword()){
					return false;
				}
				if(!chkimgcode()){
					return false;
				}
				$(this).submit();
			});

            $(".imgchange").click(function () {
                $("#imgcode").attr("src", "${ctx}/DrawImage?createTypeFlag=nl&date=" + new Date());
            })
		});
	</script>
</body>
</html>








